<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>评价管理-历史</title>
		<link rel="stylesheet" type="text/css" href="css/school/school_evaluate_administration_history.css" />
		<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<header></header>
		<section>
			<div class="section_div">
				<!-- 标题 -->
				<div id="title-div">
					<p>历史评价</p>
				</div>
				<!-- 下拉框 and 查询 -->
				<div id="dropdownselect">
					<!-- 研学名称 -->
					<select style="width: 25%;margin-left: 20px;float: left;" class="form-control form-control-chosen">
						<option>研学名称</option>
						<option>焦作云台山研学之旅</option>
						<option>嵩山少林寺研学之旅</option>
						<option>新郑炎黄故里研学之旅</option>
					</select>
					<input style="width: 10%;margin-left: 30px;float: left;" class="form-control" type="submit" id="searchbtn" name="" value="查询" />
				</div>
				<!-- 要评价的研学名称及其他信息 -->
				<div id="evaluateinfo">
					<p>研学名称：焦作云台山研学之旅</p>
					<p>学校名称：郑州市第八中学</p>
					<p>研学日期：2019年10月20日—2019年10月28日</p>
					<p>班组名称：九年级二班</p>
				</div>
				<!-- 选择学生区域 -->
				<ul id="stulist">
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
					<li>迷仙人</li>
				</ul>
				<!-- 本次研学综合评定 -->
				<div id="evaluation">
					<span style="float: left;">本次研学综合评定：</span>
					<ul id="evaluationresult">
						<li>差</li>
						<li>一般</li>
						<li>良好</li>
						<li>优秀</li>
					</ul>
					<!-- 添加获取的值 -->
					<input type="hidden" id="result"/>
					<div id="download-report">
						<img style="margin-top: -4px;margin-left: 10px;" src="img/school/download.png" width="20px" height="20px" >
						<span>下载综合评定报告</span>
						<img style="float: right;margin-top: 1px;" src="img/school/arrows-left.png" width="25px" height="25px" >
					</div>
				</div>
				<!-- 个人总结和教师评价区域 -->
				<div id="summaryandevaluate">
					<div id="personalsummary">
						<p id="personalsummary-title">
							个人总结
						</p>
						<div id="personalsummary-content">
							个人总结内容
						</div>
					</div>
					<div id="teacherevaluate">
						<p id="teacherevaluate-title">
							教师评价
						</p>
						<div id="teacherevaluate-content">
							教师评价内容
						</div>
					</div>
				</div>
			</div>
		</section>
		<footer></footer>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/school/school_evaluate_administration_history.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// 查询按钮悬浮
			$("#searchbtn").hover(function() {
				$(this).css({"background":"#D43030","color":"white","transition":"all 0.3s linear"});
			}, function() {
				$(this).css({"background":"white","color":"black","transition":"all 0.3s linear"});
			});
			//选中学生后的颜色
			$("#stulist li").click(function() {
				var index = $(this).index();
				$("#stulist li:eq("+index+")").css({"background-color":"#D43030","color":"white"});
				$("#stulist li:eq("+index+")").siblings().css({"background-color":"white","color":"black"});
			});
			//综合评定选中后的颜色
			$("#evaluationresult li").click(function() {
				var index = $(this).index();
				if(index == 0) {
					$("#result").val("差");
				} else if (index == 1) {
					$("#result").val("一般");
				} else if (index == 2) {
					$("#result").val("良好");
				} else if (index == 3) {
					$("#result").val("优秀");
				}
				$("#evaluationresult li:eq("+index+")").css({"background-color":"#D43030","color":"white"});
				$("#evaluationresult li:eq("+index+")").siblings().css({"background-color":"white","color":"black"});
			});
		</script>
	</body>
</html>
